/**
 * @name: picker分级选择器
 * @version: v1.0.0
 */
;layui.define(['layer', 'jquery'], function (exports) {
    var defIndex = 0, ly = layui.layer, a = layui.jquery, init = false;

    var picker = {
        render: function (data, callback) {

            var html = '', css = '';
            html += '<div class="picker-container"><div class="picker-header"><button class="cancel-btn">取消</button>';
            html += '<button class="confirm-btn">确定</button></div><div class="picker-content"><div class="picker-mask"></div>';
            html += '<div class="picker-indicator"></div><div class="picker-list" id="pickerList"><ul>';
            data.forEach((item, index) => {
                html += '<li>' + item.title + '</li>';
                !init && item.check ? defIndex = index : 0;
            });
            html += '</ul></div></div></div>';
            css += '<style id="pickerStyle">';
            css += '.picker-container{width:100%;background-color:#fff;overflow:hidden}.picker-header{display:flex;justify-content:space-between;padding:.26rem;background-color:#f9f9f9;border-bottom:1px solid #eee}.picker-header button{border:none;background:0 0;font-size:.28rem;cursor:pointer}.picker-header .cancel-btn{color:#888}.picker-header .confirm-btn{color:var(--bd)}.picker-content{position:relative;height:200px;overflow:hidden}.picker-mask{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 100%);pointer-events:none}.picker-indicator{position:absolute;top:50%;left:0;right:0;height:.7rem;transform:translateY(-50%);pointer-events:none;border-top:1px solid var(--ee);border-bottom:1px solid var(--ee)}.picker-list{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);overflow-y:scroll;height:100%;scroll-snap-type:y mandatory}.picker-list ul{list-style:none;margin:0;text-align:center;padding:100px 0}.picker-list li{padding:.2rem 0;font-size:.28rem;color:var(--c9);scroll-snap-align:center;transition:color .2s ease}.picker-list li.selected{color:var(--bd);font-weight:700}';
            css += '</style>'
            a('body').append(css);

            ly.open({
                type: 1,
                offset: 'b',
                anim: 'slideUp',
                area: ['100%'],
                title: false,
                closeBtn: 0,
                shade: 0.3,
                shadeClose: true,
                content: html,
                success: function (layero, index, that) {
                    a(layero).css('border-radius', '0.2rem 0.2rem 0 0');
                    a(layero).find('.layui-layer-content').css('border-radius', '0.2rem 0.2rem 0 0');
                    const pickerList = a(layero).find('#pickerList'), items = pickerList.find('li');
                    let selectedIndex = defIndex;
                    a(pickerList).scrollTop(defIndex * 40);
                    items.eq(selectedIndex).addClass('selected');
                    pickerList.on('scroll', () => {
                        clearTimeout(pickerList.scrollTimer);
                        pickerList.scrollTimer = setTimeout(() => {
                            const scrollTop = pickerList.scrollTop();
                            const middle = scrollTop + pickerList.height() / 2;

                            let closestIndex = 0;
                            let closestDistance = Infinity;
                            items.each((index, item) => {
                                const itemTop = a(item).position().top + scrollTop;
                                const itemHeight = a(item).height();
                                const itemCenter = itemTop + itemHeight / 2;
                                const distance = Math.abs(middle - itemCenter);

                                if (distance < closestDistance) {
                                    closestDistance = distance;
                                    closestIndex = index;
                                }
                            });
                            if (selectedIndex !== closestIndex) {
                                items.removeClass('selected');
                                items.eq(closestIndex).addClass('selected');
                                selectedIndex = closestIndex;
                            }
                        }, 50);
                    });

                    a(layero).find('.confirm-btn').click(function () {
                        defIndex = pickerList.find('.selected').index();
                        init = true;
                        ly.closeLast('page', callback(data[defIndex]));
                    });
                    a(layero).find('.cancel-btn').click(function () {
                        ly.closeLast('page');
                    });
                },
                end: function (layero) {
                    a('#pickerStyle').remove();
                    //移除监听
                    a(layero).off('scroll');
                }
            });
        }
    }

    exports('picker', picker);
});